<template>
  <svg
    t="1754136567484"
    class="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="12450"
    :width="size"
    :height="size"
  >
    <path
      d="M836.266667 187.733333l-22.613334-22.613333-45.226666 45.226667 22.613333 22.613333a394.666667 394.666667 0 0 1 0 558.08l-22.613333 22.613333 45.226666 45.226667 22.613334-22.613333a458.666667 458.666667 0 0 0 0-648.533334z m-150.613334 150.613334l-22.613333-22.613334-45.226667 45.226667 22.613334 22.613333a181.333333 181.333333 0 0 1 0 256.426667l-22.613334 22.613333 45.226667 45.226667 22.613333-22.613333a245.333333 245.333333 0 0 0 0-346.88zM501.333333 213.333333a32 32 0 0 0-52.010666-25.002666L244.778667 352H85.333333a32 32 0 0 0-32 32v256c0 17.664 14.336 32 32 32h159.445334l204.544 163.669333A32 32 0 0 0 501.333333 810.666667V213.333333zM276.010667 409.002667L437.333333 279.893333v464.213334l-161.322666-129.109334A32 32 0 0 0 256 608H117.333333v-192H256a32 32 0 0 0 20.010667-6.997333z"
      p-id="12451"
      :fill="color"
    ></path>
  </svg>
</template>

<script>
  export default {
    name: "VolumeOnIcon",
    props: {
      size: {
        type: [Number, String],
        default: 24,
      },
      color: {
        type: String,
        default: "#c24242",
      },
    },
  };
</script>

<style scoped>
  .icon {
    display: inline-block;
    vertical-align: middle;
  }
</style>
